<template>
<div>
    <i-form ref='myForm' :dataForm='dataForm'>
        <template  #cus_template="{ obj }">
            <div class='cus_template'>
                <a-input  v-model:value="dataForm.form[obj.field]" :placeholder="obj.label"  class="i-form-item"/>
                <a-button type="primary">关联数据</a-button>
            </div>
        </template>
    </i-form>
    <div style="text-align: center;">
        <a-button type="primary" @click='onSubmit'>提交</a-button>
        <a-button type="primary" @click='resetForm'>清空验证</a-button>
    </div>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IForm } from 'wd-platform-library'
import { FormInterFace, FormDataInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
interface DataFormInterFace {
    name: string;
    age: string | undefined;
    datePicker: string;
    address: string | undefined;
    city: string | undefined;
    time: Array<any>;
    cascaderList:Array<any>;
    treeSelectList:Array<any>;
    templateField:any;
    radio:string;
    treeSelectList1:Array<any>;
    checkBoxSelect:Array<any>;
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const myForm = ref()
        const dataList = [
            {
                id: 10891065345474561,
                menuName: '权限管理',
                children: [
                    {
                        id: 10948510534696991,
                        menuName: '角色管理'
                    },
                    {
                        id: 10948510534697001,
                        menuName: '菜单管理'
                    },
                    {
                        id: 10948510534697011,
                        menuName: '用户管理'
                    },
                    {
                        id: 10948510534697021,
                        menuName: '资源管理'
                    },
                    {
                        id: 10948510534697031,
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: 10948510534696971,
                menuName: '系统管理',
                children: [
                    {
                        id: 10948510534697041,
                        menuName: '应用管理'
                    },
                    {
                        id: 1094851053469705,
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                name: '',
                age: undefined,
                datePicker: '',
                address: undefined,
                city: undefined,
                time: [],
                cascaderList: [],
                templateField: '',
                radio: '',
                treeSelectList: [],
                treeSelectList1: [],
                checkBoxSelect: []
            },
            fieldDataList: [
                {
                    type: 'input', // form表单类型
                    label: '用户名', // 字段描述信息
                    field: 'name', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 5,
                            message: 'Length should be 3 to 5',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'datePicker', // form表单类型
                    label: '出生日期', // 字段描述信息
                    field: 'datePicker', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请填写日期',
                            trigger: 'change',
                            type: 'object'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '年龄', // 字段描述信息
                    field: 'age', // form 对应字段
                    dataList: [
                        {
                            label: '21',
                            value: '21'
                        },
                        {
                            label: '20',
                            value: '20'
                        },
                        {
                            label: '19',
                            value: '19'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择年龄',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'radio', // form表单类型
                    label: '单选', // 字段描述信息
                    field: 'radio', // form 对应字段
                    dataList: [
                        {
                            label: '21',
                            value: '21'
                        },
                        {
                            label: '20',
                            value: '20'
                        },
                        {
                            label: '19',
                            value: '19'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择年龄',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '省份', // 字段描述信息
                    field: 'address', // form 对应字段
                    callback: (data: any) => {
                        alert(data)
                        dataForm.fieldDataList.forEach((item: FormDataInterFace) => {
                            if (item.field === 'city') {
                                item.dataList = [
                                    {
                                        label: '海淀区',
                                        value: 'haidianqu'
                                    },
                                    {
                                        label: '朝阳区',
                                        value: 'chaoyangqu'
                                    },
                                    {
                                        label: '石景山',
                                        value: 'shijingshan'
                                    },
                                    {
                                        label: '昌平区',
                                        value: 'changping'
                                    }
                                ]
                            }
                        })
                    },
                    dataList: [
                        {
                            label: '河南',
                            value: 'henan'
                        },
                        {
                            label: '郑州',
                            value: 'zhegnzhou'
                        },
                        {
                            label: '北京',
                            value: 'beijing'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择地址',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'city', // form 对应字段
                    dataList: [
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择城市',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'rangePicker', // form表单类型
                    label: '时间', // 字段描述信息
                    field: 'time', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请选择时间',
                            trigger: 'change',
                            type: 'array'
                        }
                    ]
                },
                {
                    type: 'template', // form表单类型
                    label: '自定义展示', // 字段描述信息
                    field: 'templateField', // form 对应字段
                    template: 'cus_template'
                },
                {
                    type: 'cascader', // form表单类型
                    label: '级联选择框', // 字段描述信息
                    field: 'cascaderList', // form 对应字段
                    options: {
                        fieldNames: { label: 'menuName', value: 'id', children: 'children' }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                },
                {
                    type: 'treeSelect', // form表单类型
                    label: '树形选择框', // 字段描述信息
                    field: 'treeSelectList', // form 对应字段
                    options: {
                        replaceFields: { title: 'menuName', value: 'id', children: 'children' },
                        treeNodeFilterProp: 'menuName'
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                },
                {
                    type: 'treeSelect', // form表单类型
                    label: '树形父子不关联', // 字段描述信息
                    field: 'treeSelectList1', // form 对应字段
                    options: {
                        replaceFields: { title: 'menuName', value: 'id', children: 'children' },
                        treeNodeFilterProp: 'menuName',
                        treeCheckStrictly: true
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                },
                {
                    type: 'checkBoxSelect', // form表单类型
                    label: '下拉复选', // 字段描述信息
                    field: 'checkBoxSelect', // form 对应字段
                    options: {
                        replaceFields: { title: 'menuName', value: 'id', children: 'children' },
                        treeNodeFilterProp: 'menuName',
                        treeCheckStrictly: true
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                }
            ]
        })
        const onSubmit = () => {
            myForm.value.onSubmit().then((res: any) => {
                console.log(res.form)
                console.log(res.form.name)
            }).catch((err: any) => {
                if (err) {
                    console.log('123')
                }
            })
        }
        const resetForm = () => {
            myForm.value.resetForm()
        }
        return {
            onSubmit,
            resetForm,
            myForm,
            dataForm
        }
    },
    methods: {
        update (data: DataFormInterFace) {
            alert('我是编辑')
            console.log(data.name)
        },
        onChangePage (url: string | null): void {
            this.$router.push(url || '')
        }
    },
    components: {
        IForm
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
